<template>
    <div class="editor">
        <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editor"
            :defaultConfig="toolbarConfig"
            :mode="mode"
        />
        <Editor
            :style="{width:width+'%',height:height+'px'}"
            v-model="body"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="initEditor"
            @onChange="changeEditor"
        ></Editor>
    </div>
</template>

<script>
import '@wangeditor/editor/dist/css/style.css';
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
    name: "editor1",
    components: {
        Editor,
        Toolbar,
    },
    data() {
        return {
            editor: null,
            body: "",
            toolbarConfig: {
                // toolbarKeys:[],
                insertKeys: {index: 20, keys: ["uploadImage"]},
                excludeKeys: ["emotion", "insertImage", "group-video", "group-image"],
            },
            editorConfig: {
                placeholder: '请输入内容...',
                MENU_CONF: {
                    uploadImage: {
                        server: "",
                        fieldName: 'image',             // form-data fieldName
                        maxFileSize: 5 * 1024 * 1024,   // 单个文件的最大体积限制，默认为 2M
                        maxNumberOfFiles: 1,           // 最多可上传几个文件，默认为 100
                        allowedFileTypes: ['image/*'],  // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
                        meta: {                         // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
                        },
                        metaWithUrl: false,             // 将 meta 拼接到 url 参数中，默认 false
                        headers: {                      // 自定义增加 http  header
                        },
                        withCredentials: true,          // 跨域是否传递 cookie ，默认为 false
                        timeout: 5 * 1000,              // 超时时间，默认为 10 秒
                        // onBeforeUpload(file) {          // 上传之前触发
                        //     this.beforeUpload(file);
                        // },
                        // onProgress(progress) {          // 上传进度的回调函数
                        // },
                        // onSuccess(file, res) {          // 单个文件上传成功之后
                        // },
                        // onFailed(file, res) {           // 单个文件上传失败
                        // },
                        // onError(file, err, res) {       // 上传错误，或者触发 timeout 超时
                        // }
                    },
                }
            },
        };
    },
    props: {
        mode: { // default or 'simple'
            type: String,
            default: "default"
        },
        // meta: {
        //     type: Object,
        //     default: new Object()
        // },
        headers: {
            type: Object,
            default: new Object()
        },
        content: {
            type: String,
            default: ""
        },
        width: {
            type: Number,
            default: 100,
        },
        height: {
            type: Number,
            default: 300,
        },
        uploadImgUrl: {
            type: String,
            default: "/upload/image"
        }
    },
    created() {
        this.body = this.content;
    },
    mounted() {
        setTimeout(_ => {
            const config = this.editor.getConfig()
            config.MENU_CONF.uploadImage.server = this.uploadImgUrl
            config.MENU_CONF.uploadImage.headers = this.headers
            config.MENU_CONF.uploadImage.base64LimitSize = 5 * 1024 * 1024
            // config.MENU_CONF.uploadImage.meta = this.meta
            // config.MENU_CONF.uploadImage.onBeforeUpload = (file) => {
            //     this.$emit("uploadBefore", file);
            // }
            // config.MENU_CONF.uploadImage.onProgress = (progress) => {
            //     this.$emit("uploadProgress", progress);
            // }
            // config.MENU_CONF.uploadImage.onSuccess = (file, result) => {
            //
            //     this.$emit("uploadSuccess", file, result);
            // }
            // config.MENU_CONF.uploadImage.onFailed = (file, result) => {
            //     this.$emit("uploadSuccess", file, result);
            // }
            // config.MENU_CONF.uploadImage.onError = (file, error, result) => {
            //     this.$emit("uploadError", file, error, result);
            // }
            // console.log(this.editor.getAllMenuKeys())
        }, 500);
    },
    beforeDestroy() {
        if (this.editor == null) return
        this.editor.destroy()
    },
    methods: {
        // 初始化编辑器
        initEditor(editor) {
            this.editor = Object.seal(editor)
        },
        // 编辑器内容改变
        changeEditor(editor) {
            this.$emit("bindBody", editor.getHtml())
        },
    },
    watch: {
        content(val) {
            this.body = val;
        }
    }
}
</script>

<style lang="less" scoped>
.editor {
    border: 1px solid #f8f8f8;
    overflow: hidden;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.1);
}
</style>
